<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="search-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        class="formBox"
        label-width="90px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input
            placeholder="请输入学校姓名"
            class="width_100"
            v-model="queryParams.name"
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input
            placeholder="请输入完整的身份证号"
            v-model="queryParams.idNumber"
            maxlength="18"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="queryParams.sex" placeholder="请选择性别" class="width_100">
            <el-option label="男" value="1" />
            <el-option label="女" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="collegeId">
          <el-select
            v-model="queryParams.collegeId"
            placeholder="请选择学院"
            @change="getCollegeModeListFun"
          >
            <el-option
              v-for="(item, index) in getSchoolCollegeListData"
              :key="index"
              :label="item.collegeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模式" prop="educationId">
          <el-select
            v-model="queryParams.educationId"
            placeholder="请选择模式"
            @change="getCollegeMajorListFun"
          >
            <el-option
              v-for="(item, index) in getCollegeModeListData"
              :key="index"
              :label="item.modelName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业名称" prop="majorId">
          <el-select v-model="queryParams.majorId" placeholder="请选择专业名称">
            <el-option
              v-for="(item, index) in getCollegeMajorListData"
              :key="index"
              :label="item.majorName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="gradeId">
          <el-select v-model="queryParams.gradeId" placeholder="请选择年级">
            <el-option
              v-for="(item, index) in getSchoolGradeListData"
              :key="index"
              :label="item.grade"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="报名状态" prop="signStatus">
          <el-select v-model="queryParams.signStatus" placeholder="请选择报名状态">
            <el-option label="预报名成功" value="1" />
            <el-option label="已完善信息" value="2" />
            <el-option label="账单已缴费" value="3" />
            <el-option label="缴费已退款" value="4" />
            <el-option label="已取消报名" value="5" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="报名时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 按钮 -->
    <el-card class="box-card" style="margin-top: 10px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="buttonMethod(1)"
            v-hasPermi="['studentManage:intemnalStudent:add']"
            >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleExport()"
            v-hasPermi="['studentManage:intemnalStudent:export']"
            >导出
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-s-tools"
            size="mini"
            @click="buttonMethod(6)"
            v-hasPermi="['studentManage:intemnalStudent:batchProcessingStatus']"
            >批量处理状态
          </el-button>
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
    </el-card>
    <!-- 列表 -->
    <el-card class="table-card" style="margin-top: 10px">
      <el-table
        :data="dataList"
        @selection-change="handleSelectionChange"
        row-key="id"
        size="mini"
        stripe
        border
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="姓名" prop="name" fixed="left" />
        <el-table-column label="身份证号" prop="idNumber" width="140" fixed="left" />
        <el-table-column label="性别" prop="sex">
          <template slot-scope="scope">
            <div v-if="scope.row.sex == '1'">男</div>
            <div v-if="scope.row.sex == '0'">女</div>
          </template>
        </el-table-column>
        <el-table-column label="学院" prop="collegeName" />
        <el-table-column label="专业" prop="majorName" />
        <el-table-column label="模式" prop="education" />
        <el-table-column label="年级" prop="gradeName" />
        <el-table-column label="班级" prop="className" />
        <el-table-column label="学制" prop="schoolSystem" />
        <el-table-column label="在校状态">
          <template slot-scope="scope">
            <div v-if="scope.row.graduate == '0'">未入学</div>
            <div v-if="scope.row.graduate == '1'">在校</div>
            <div v-if="scope.row.graduate == '2'">休学</div>
            <div v-if="scope.row.graduate == '3'">请假</div>
            <div v-if="scope.row.graduate == '4'">退学</div>
            <div v-if="scope.row.graduate == '5'">毕业</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="报名时间" prop="signTime" width="140" /> -->
        <el-table-column label="交费金额" prop="money" />
        <el-table-column label="自主缴费" prop="selfMoney" />
        <el-table-column label="退费金额" prop="refundMoney">
          <template slot-scope="scope">
            <div>{{ scope.row.refundMoney ? scope.row.refundMoney : "0" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="buttonMethod(3, scope.row)"
              v-hasPermi="['studentManage:intemnalStudent:zxsEdit']"
              >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="buttonMethod(4, scope.row)"
              v-hasPermi="['studentManage:intemnalStudent:RefundPaymentRecord']"
            >
              退缴费记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 添加、编辑 -->
    <el-dialog :title="title" :visible.sync="status" width="30%">
      <el-form label-width="120px" label-position="right" size="small" class="formBox">
        <el-row class="mb_10">
          <el-col :span="20">
            <el-form-item label="学院：" class="is-required">
              <el-select
                v-model="queryForm.collegeId"
                placeholder="请选择学院"
                style="width: 100%"
                @change="getCollegeModeListFun"
              >
                <el-option
                  v-for="(item, index) in getSchoolCollegeListData"
                  :key="index"
                  :label="item.collegeName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="模式：" class="is-required">
              <el-select
                v-model="queryForm.educationId"
                placeholder="请选择模式"
                style="width: 100%"
                @change="getCollegeMajorListFun"
              >
                <el-option
                  v-for="(item, index) in getCollegeModeListData"
                  :key="index"
                  :label="item.modelName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="专业名称：" class="is-required">
              <el-select
                v-model="queryForm.majorId"
                placeholder="请选择专业名称"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getCollegeMajorListData"
                  :key="index"
                  :label="item.majorName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="学制：" class="is-required">
              <el-select
                v-model="queryForm.schoolSystem"
                placeholder="请选择学制"
                style="width: 100%"
              >
                <el-option label="6年" value="6" />
                <el-option label="5年" value="5" />
                <el-option label="4年" value="4" />
                <el-option label="3年" value="3" />
                <el-option label="2年" value="2" />
                <el-option label="1年" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="年级：" class="is-required">
              <el-select
                v-model="queryForm.gradeId"
                placeholder="请选择年级"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getSchoolGradeListData"
                  :key="index"
                  :label="item.grade"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="班级：">
              <el-input placeholder="请输入班级" v-model="queryForm.className" />
            </el-form-item>
            <el-form-item label="姓名：" class="is-required">
              <el-input placeholder="请输入姓名" v-model="queryForm.name"> </el-input>
            </el-form-item>
            <el-form-item label="性别：">
              <el-select
                v-model="queryForm.sex"
                placeholder="请选择性别"
                style="width: 100%"
              >
                <el-option label="男" :value="1" />
                <el-option label="女" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号：" class="is-required">
              <el-input
                placeholder="请输入完整的身份证号"
                v-model="queryForm.idNumber"
                maxlength="18"
                show-word-limit
              />
            </el-form-item>
            <!-- <el-form-item label="报名时间：" class="is-required">
              <el-date-picker
                v-model="queryForm.signTime"
                type="date"
                placeholder="选择报名日期"
                class="width_100"
              />
            </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="buttonMethod(2)">取 消</el-button>
        <el-button type="primary" @click="addDataFun">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 报名状态 -->
    <el-dialog :title="title" :visible.sync="list_status" width="60%">
      <el-table :data="detailList" style="width: 100%">
        <el-table-column prop="feeYearName" label="缴费学年" />
        <el-table-column prop="title" label="项目" />
        <el-table-column prop="money" label="账单金额（元）" />
        <el-table-column prop="beforePay" label="预缴费（元）" />
        <el-table-column prop="selfMoney" label="支付金额（元）" />
        <el-table-column prop="paymentMethod" label="支付方式">
          <template slot-scope="scope">
            <div v-if="scope.row.paymentMethod == '100'">微信支付</div>
            <div v-if="scope.row.paymentMethod == '400'">邮储支付</div>
          </template>
        </el-table-column>
        <el-table-column prop="payStatus" label="支付状态">
          <template slot-scope="scope">
            <div v-if="scope.row.payStatus == '0'">未支付</div>
            <div v-if="scope.row.payStatus == '1'">已支付</div>
            <div v-if="scope.row.payStatus == '2'">支付失败</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="支付时间" width="160" />
      </el-table>
    </el-dialog>
    <!-- 报名状态 -->
    <el-dialog :title="title" :visible.sync="sign_up_status" width="30%">
      <el-form label-width="120px" label-position="right" size="small" class="formBox">
        <el-row class="mb_10">
          <el-col :span="20">
            <el-form-item label="报名状态：" class="is-required">
              <el-select
                v-model="queryForm.signStatus"
                placeholder="请选择报名状态"
                style="width: 100%"
              >
                <el-option label="未入学" value="0" />
                <el-option label="在校" value="1" />
                <el-option label="休学" value="2" />
                <el-option label="请假" value="3" />
                <el-option label="退学" value="4" />
                <el-option label="毕业" value="5" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="buttonMethod(3)">取 消</el-button>
        <el-button type="primary" @click="buttonMethod(9)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  systemInfoNewList,
  systemInfoIn,
  systemGetAllLog,
  systemInfoPutAdd,
  systemInfoPostAdd,systemInfoGetId
} from "@/api/studentManage";
import {
  getSchoolCollegeList,
  getCollegeModeList,
  getCollegeMajorList,
  getSchoolGradeList,
} from "@/api/educational";
export default {
  name: "",
  dicts: ["campus_status"],
  data() {
    return {
      status: false,
      list_status: false,
      sign_up_status: false,
      title: "",
      dataList: [],
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        idNumber: null,
        sex: null,
        collegeId: null,
        educationId: null,
        majorId: null,
        gradeId:null,
        signStatus: null,
        startDate: null,
        endDate: null,
      },
      queryForm: {},
      total: 1,
      showSearch: true,
      date: [],
      list_status_index: "1",

      getSchoolCollegeListData: [],
      getCollegeModeListData: [],
      getCollegeMajorListData: [],
      getSchoolGradeListData: [],
      detailList: [],
    };
  },
  created() {
    this.getSchoolCollegeListFun();
    this.getSchoolGradeListFun();
    this.getList();
  },
  methods: {
    /**
     * 获取学院列表的函数
     */
    getSchoolCollegeListFun() {
      getSchoolCollegeList().then((res) => {
        if (res.code == 200) {
          this.getSchoolCollegeListData = res.data;
        }
      });
    },
    /**
     * 获取学院模式列表
     *
     * @param {number} options - 学院ID
     */
    getCollegeModeListFun(options, status) {
      if (!status) {
        this.$set(this.queryParams, "educationId", "");
        this.$set(this.queryForm, "educationId", "");
        this.$set(this.queryParams, "majorId", "");
        this.$set(this.queryForm, "majorId", "");
      }
      this.getCollegeModeListData = [];
      getCollegeModeList({
        collegeId: options,
      }).then((res) => {
        if (res.code == 200) {
          this.getCollegeModeListData = res.data;
        }
      });
    },
    /**
     * 获取学校专业列表的函数
     *
     * @returns 无返回值
     */
    getCollegeMajorListFun(options, status) {
      if (!status) {
        this.$set(this.queryParams, "majorId", "");
        this.$set(this.queryForm, "majorId", "");
      }
      this.getCollegeMajorListData = [];
      getCollegeMajorList({ modelId: options }).then((res) => {
        if (res.code == 200) {
          this.getCollegeMajorListData = res.data;
        }
      });
    },
    /**
     * 获取年级
     *
     * @returns 无返回值
     */
    getSchoolGradeListFun() {
      getSchoolGradeList().then((res) => {
        if (res.code == 200) {
          this.getSchoolGradeListData = res.data;
        }
      });
    },
    // 获取列表数据
    getList() {
      var that = this;
      var data = this.queryParams;
      if (this.date.length > 0) {
        data.startDate = this.date[0];
        data.endDate = this.date[1];
      }
      data.isDel = 0;
      data.graduate = 1;
      data.sealStatus = 0;
      systemInfoNewList(data).then((res) => {
        if (res.code == 200) {
          that.dataList = res.rows;
          that.total = res.total;
        }
      });
    },
    /**
     * 按钮点击事件处理方法
     */
    buttonMethod(options, value) {
      //options 等于 1
      if (options == 1) {
        this.queryForm = {};
        this.title = "添加";
        this.status = true;
        this.getCollegeModeListData = [];
        this.getCollegeMajorListData = [];
      }
      //options 等于 2 关闭弹窗
      else if (options == 2) {
        this.queryForm = {};
        this.title = "";
        this.status = false;
      }
      //options 等于 3 关闭弹窗
      else if (options == 3) {
        systemInfoGetId(value.id).then((res) => {
          if (res.code == 200) {
            this.getCollegeModeListFun(res.data.collegeId, true);
            this.getCollegeMajorListFun(res.data.educationId, true);
            this.title = "修改";
            this.status = true;
            this.queryForm = { ...res.data };
            if (this.queryForm.sex == 3) {
              this.queryForm.sex = "";
            }
          }
        });
      }
      //提交
      else if (options == 31) {
        this.queryForm = {};
        this.title = "修改";
        this.status = true;
      }
      //状态
      else if (options == 4) {
        this.list_status = true;
        this.title = "缴费记录";
        systemGetAllLog(value.id).then((res) => {
          if (res.code == 200) {
            this.detailList = res.data;
          }
        });
      }
      //   提交
      else if (options == 41) {
        this.list_status = true;
      }
      //关闭/启用该校区
      else if (options == 5) {
        this.title = "";
        this.queryForm = {};
        this.list_status = false;
        this.status = false;
      }
      //关闭/启用该校区
      else if (options == 6) {
        if (this.ids.length == 0) {
          return this.$message({
            type: "error",
            message: "请选择数据!",
          });
        }
        this.sign_up_status = true;
      }
      // 报名状态
      else if (options == 7) {
        var data = {
          ids: this.ids,
        };
        systemInfoIn(data).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.resetQuery();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      }
    },
    /**
     * 添加数据的方法
     * @returns 无返回值
     */
    addDataFun() {
      var data = this.queryForm;
      if (!data.collegeId) {
        return this.$message({
          type: "error",
          message: "请选择学院",
        });
      }
      if (!data.educationId) {
        return this.$message({
          type: "error",
          message: "请选择模式",
        });
      }
      if (!data.majorId) {
        return this.$message({
          type: "error",
          message: "请选择专业名称",
        });
      }
      if (!data.schoolSystem) {
        return this.$message({
          type: "error",
          message: "请选择学制",
        });
      }
      if (!data.gradeId) {
        return this.$message({
          type: "error",
          message: "请选择年级",
        });
      }
      // if (!data.className) {
      //   return this.$message({
      //     type: "error",
      //     message: "请输入班级",
      //   });
      // }
      if (!data.name) {
        return this.$message({
          type: "error",
          message: "请输入姓名",
        });
      }
      if (!data.sex) {
        data.sex = 3;
      }
      // if (!data.sex) {
      //   return this.$message({
      //     type: "error",
      //     message: "请选择性别",
      //   });
      // }
      if (!data.idNumber) {
        return this.$message({
          type: "error",
          message: "请输入完整的身份证号",
        });
      }
      // if (!data.signTime) {
      //   return this.$message({
      //     type: "error",
      //     message: "选择报名日期",
      //   });
      // }

      data.isDel = 0;
      data.graduate = 1;
      data.sealStatus = 0;
      data.signStatus = 2;
      var that = this;
      
      if (data.id) {
        systemInfoPutAdd(data).then((res) => {
          if (res.code == 200) {
            that.$message({
              type: "success",
              message: res.msg,
            });
            this.status = false;
            this.resetQuery();
          } else {
            that.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      } else {
        systemInfoPostAdd(data).then((res) => {
          
          if (res.code == 200) {
            that.$message({
              type: "success",
              message: res.msg,
            });
            this.status = false;
            this.resetQuery();
          } else {
            that.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      }
    },
    /**
     * 处理查询请求
     *
     * 将查询参数中的页码重置为1，并调用getList方法获取列表数据
     */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 重置查询表单并重新执行查询操作
     */
    resetQuery() {
      this.date = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: null,
        idNumber: null,
        sex: null,
        collegeId: null,
        educationId: null,
        majorId: null,
        gradeId:null,
        signStatus: null,
        startDate: null,
        endDate: null,
      };
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**处理导出操作*/
    handleExport() {
      var data = { ...this.queryParams };
      data.isDel = 0;
      data.graduate = 1;
      data.sealStatus = 0;
      this.download("/system/info/oldExport", data, `在校生信息导出.xlsx`);
    },
    handleSelectionChange(options) {
      this.ids = options.map((item) => item.id);
    },
    handleClick() {},
  },
};
</script>
<style scoped>
.width_100 {
  width: 100%;
}
</style>
